<ul class="code-tree">
  <li
    v-for="(tag,index) in tree"
    :key="index"
    @click.stop="changeElem(tag)"
    @mouseover.stop="hoverElem(tag)"
    @mouseout.stop="unhoverElem(tag)"
  >
    <span :class="{ hover: tag.isHovered }" class="code"
      >&lt;{{ tag.name }}<span
        v-if="tag.hasAttr"
        class="code-attr"
        v-html="tag.attrText"
      ></span
      ><template v-if="tag.isSelfClosed">/&gt;</template>
      <template v-else>&gt;</template>
    </span>
    <template v-if="tag.hasChild">
      <kb-html-tree
        v-if="tag.depth <= maxDepth"
        :elem="tag.children"
        :depth="tag.depth + 1"
      ></kb-html-tree>
    </template>
    <template v-else-if="!tag.isSelfClosed">
      ...
    </template>
    <span
      v-if="!tag.isSelfClosed"
      :class="{ hover: tag.isHovered }"
      class="code"
      >&lt;/{{ tag.name }}&gt;</span
    >
  </li>
</ul>
